<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div style="position: relative">
      <div class="greyBox"></div>
      <div class="payBox">
        <div class="payMain">
          <div class="payTop">
            <span class="iconfont icon-jia" @click="payClose()"></span
            ><span>订阅书籍</span>
          </div>
          <div class="hint">
            <div>本书籍为付费书籍，你确定要选择购买此书籍</div>
          </div>
          <div class="way">
            <div class="price">
              <div>价格</div>
              <div>{{ $store.state.bags.bookItem.money }}点券</div>
            </div>
            <div class="priceWay">
              <div>支付方式</div>
              <div>余额</div>
            </div>
          </div>
          <div class="explain">
            <div>购买说明：</div>
            <div>1.数字阅读作品购买成功后不可退回。</div>
          </div>
        </div>
        <div class="payBtn">
          <button @click="btnClick()">立即以{{ $store.state.bags.bookItem.money }}点券订阅</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from 'vant';
export default {
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$store.dispatch("login/getUser", {
            userid: sessionStorage.getItem("userId"),
          })
    
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  // Vue方法定义
  methods: {
    payClose() {
      // console.log(this.$parent.back());
      this.$parent.back()
    },
    btnClick(){
      
      // console.log(this.$store.state.bags.bookItem.money);
      // console.log(this.$store.state.login.loginuser.rmb,'rmb');
      // console.log(this.$store.state.bags.bookItem.money<this.$store.state.login.loginuser.rmb);
      console.log(this.$store.state.login.loginuser);
        if(Number(this.$store.state.bags.bookItem.money)<Number(this.$store.state.login.loginuserMsg.user.rmb)){
            console.log('可以支付');
            Toast('订阅成功');
           this.$parent.back()
          //  支付书本价钱
            this.$store.dispatch('bags/payBook',{userid:this.$store.state.login.loginuser.userid,bookid:this.$store.state.bags.bookItem.bookid}).then((res)=>{

              this.$store.dispatch('login/getUser',{userid:sessionStorage.getItem('userId')})
            })
          //  添加订阅书籍
           this.$store.dispatch('bags/subscription',{userid:this.$store.state.login.loginuser.userid,bookid:this.$store.state.bags.bookItem.bookid})
            //  添加用户信息
           this.$store.dispatch('bags/getUserMsg',{userid:sessionStorage.getItem('userId')})
        }else{
            console.log('需要充值');
            // this.$emit('topUp','topup')
            this.$store.commit('bags/componentPath','affirm')
            // console.log(this.$store.state.login.loginuser);
            
        }
    }
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* 弹窗 */
.greyBox {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}
.payBox {
  position: absolute;
  background-color: white;
  width: 100vw;
  padding: 0px 0 20px;
  bottom: 0;
}
.payTop {
  line-height: 50px;
  font-size: 17px;
  font-family: PingFangSC-regular;
  position: relative;
  /* padding-left: 20px; */
}
.payMain {
  padding: 0 15px;
}
.payTop > span:nth-child(1) {
  transform: rotate(45deg);
  color: #666666;
  font-size: 20px;
  display: inline-block;
}
.payTop > span:nth-child(2) {
  margin-left: -0.906667rem;
  width: 68px;
  position: absolute;
  left: 50%;
}

/* 提示 */
.hint {
  margin-top: 15px;
}
.hint > div:nth-child(1) {
  font-size: 15px;
  color: #6e6e6e;
  line-height: 21px;
}

/* 方式 */
.way > div {
  border-bottom: 2px solid #f7f7f7;
  line-height: 55px;
  font-size: 15px;
  color: #161616;
  display: flex;
  justify-content: space-between;
}
.price > div:nth-child(2) {
  color: #ed8900;
}
.priceWay > div:nth-child(2) {
  color: #7f7f7f;
}
.explain {
  margin-top: 20px;
  color: #868686;
  line-height: 27px;
  font-size: 13px;
}
.payBtn {
  margin-top: 21px;
  border-top: 2px solid #f9f9f9;
  padding-top: 9px;
  text-align: center;
}
.payBtn > button {
  width: 345px;
  line-height: 43px;
  border-radius: 30px;
  border: none;
  outline: none;
  background-color: #f09d11;
  color: white;
  font-size: 15px;
  font-family: PingFangSC-regular;
  /* margin:0 auto; */
}
</style>